<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <title>配置向导</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/config/guide.css"/>

</head>
<body>
<div id="app">
    <div class="fullscreen flex-box row bg-white">
        <div class="left flex-box col" style="min-height: 600px;height: 100%;">
            <div class="zx-config-block">
                <div class="h3">项目<span>project</span>

                    <div style="position: absolute;right: 0px;width: 180px;top: 0;">
                        <el-input v-model="searchText" autocomplete="off" style="width: 100%;"
                                  placeholder="请输入搜索关键字"></el-input>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="scroll-y" style="min-height: 267px;height: 267px;">
                        <div v-for="(i,k) in fetchProjectList"
                             v-if="!searchText || (i.groupId+':'+i.artifactId).indexOf(searchText)>=0" :key="k"
                             @click="getVersion(i, k)"
                             :class="projectObj && projectObj.projectId===i.projectId?'active': ''"
                             class="zx-project-item flex-box">
                            <div class="flex-1"><span>{{i.groupId}}:{{i.artifactId}}</span></div>
                            <div><span>{{i.projectDesc}}</span></div>
                            <i v-if="i.abstractProject == 1" class="el-icon-warning"></i>
                        </div>

                    </div>
                </div>

            </div>
            <div class="zx-config-block flex-1">
                <h3>版本<span>version</span></h3>
                <div class="flex-1">
                    <div class="scroll-y" style="">
                        <div v-for="(i,k) in fetchProjectVersionList" :key="k" @click="getEnvironment(i, k)"
                             :class="versionObj.versionId===i.versionId?'active': ''" class="zx-project-item flex-box">
                            <div><span>{{i.version}}</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zx-config-block flex-1">
                <div class="h3">环境<span>environment</span>
                    <i class="el-icon-circle-plus-outline zx-icon-btn" style="float: right;"
                       v-on:click="createEnvironment()"></i>
                </div>
                <div class="flex-1">
                    <div class="scroll-y" style="">
                        <!-- v-for="(item, index) in js 对象列表" -->
                        <div v-for="(i,k) in fetchEnvironmentList" :key="k" @click="getMachine(i, k)"
                             :class="environmentObj.environmentId===i.environmentId?'active': ''"
                             class="zx-project-item flex-box">
                            <div class="flex-1"><span>{{i.environmentName}}</span></div>
                            <div><span>{{envType(i.environmentType)}}</span></div>
                            <i class="el-icon-delete zx-icon-btn"
                               v-on:click.stop="deleteEnvironment(i.environmentId)"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zx-config-block flex-1">
                <div class="h3">机器<span>machine</span>
                    <i class="el-icon-circle-plus-outline zx-icon-btn" style="float: right;"
                       v-on:click="createMachine()"></i>
                </div>
                <div class="flex-1">
                    <div class="scroll-y" style="">
                        <div v-for="(i,k) in fetchMachineList" :key="k" @click="getParamList(i, k)"
                             :class="machineObj.machineName===i.machineName?'active': ''"
                             class="zx-project-item flex-box">
                            <div><span>{{i.machineName}}</span></div>
                            <div><span>{{i.machineDesc}}</span></div>
                            <i class="el-icon-refresh zx-icon-btn" v-on:click.stop="repairParams(i.machineId)"></i>
                            <i class="el-icon-delete zx-icon-btn" v-on:click.stop="deleteMachine(i.machineId)"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right flex-box col flex-1">
            <div class="zx-config-block flex-1">
                <div class="zx-header flex-box" style="padding: 12px 20px;line-height: 24px;justify-content: flex-end;">
                    <!-- 	如果机器对象已选中 则显示下面按钮	-->
                    <template v-if="machineObj">
                        <button class="zx-action-btn blue" @click="createParam()" v-if="!isUpdate">新增</button>
                        <button class="zx-action-btn" @click="toBatchUpdateParam" v-if="!isUpdate">编辑模式</button>
                        <button class="zx-action-btn" @click="cancelSave" v-else>放弃修改</button>
                        <button class="zx-action-btn" @click="batchUpdateParam" v-if="isUpdate">保存</button>
                        <button class="zx-action-btn" @click="importParams(machineObj.machineId)" v-if="!isUpdate">导入
                        </button>
                        <button class="zx-action-btn" @click="exportParams(machineObj.machineId)" v-if="!isUpdate">导出
                        </button>
                    </template>
                </div>
                <div class="flex-1">
                    <div class="scroll-y" style="height: 100%;">
                        <el-table
                                :height="tableHeight"
                                :data="tableData"
                                stripe
                                ref="singleTable"
                                highlight-current-row
                                @current-change="setCurrent"
                                @setCurrentRow="setCurrent"

                                style="width: 100%">
                            <el-table-column label="" type="index" width="40"></el-table-column>
                            <el-table-column prop="paramName" label="参数名" width="200">
                                <template slot-scope="scope">
                                    <i v-if="scope.row.paramExtends == 1" class="el-icon-warning"></i>
                                    <!--<el-input v-if="isUpdate" v-model="scope.row.paramName" placeholder="请输入内容"></el-input>-->
                                    <span>{{scope.row.paramName}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="paramType" label="参数类型" width="80">
                                <template slot-scope="scope">
                                    <el-select
                                            v-if="isUpdate && scope.row.paramExtends == 2 && scope.row.paramAuthority == 1"
                                            value-key="value" v-model="scope.row.paramType"
                                            @change="scope.row.update=1;" placeholder="请选择参数类型">
                                        <!--<el-option label="系统参数" value="1"></el-option>
                                        <el-option label="应用参数" value="2"></el-option>
                                        <el-option label="用户参数" value="3"></el-option>-->
                                        <el-option v-for="(i, k) in paramTypeList" :label="i.label"
                                                   :value="i.value"></el-option>
                                    </el-select>
                                    <span v-else>{{paramType(scope.row.paramType)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="paramDataType" label="数据类型" width="80">
                                <template slot-scope="scope">
                                    <el-select
                                            v-if="isUpdate && scope.row.paramExtends == 2 && scope.row.paramAuthority == 1"
                                            v-model="scope.row.paramDataType" @change="scope.row.update=1;"
                                            placeholder="请选择数据类型">
                                        <el-option v-for="(i, k) in dataTypeList" :label="i.label"
                                                   :value="i.value"></el-option>
                                        <!--<el-option label="整数" value="2"></el-option>
                                        <el-option label="字符串" value="3"></el-option>-->
                                    </el-select>
                                    <span v-else>{{dataType(scope.row.paramDataType)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="paramValue" label="参数值">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.paramAuthority == 1">
                                        <el-input v-if="isUpdate && scope.row.paramExtends == 2" type="textarea"
                                                  v-model="scope.row.paramValue" @change="scope.row.update=1;"
                                                  placeholder="请输入内容"></el-input>
                                        <span v-else>{{scope.row.paramValue}}</span>
                                    </div>
                                    <div v-else>
                                        <span>无权限!!!</span>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="paramDesc" label="参数描述" width="200">
                                <template slot-scope="scope">
                                    <!-- 如果需要修改  设置  v-if="isUpdate" 在标签上，其他 -->
                                    <el-input
                                            v-if="isUpdate && scope.row.paramExtends == 2 && scope.row.paramAuthority == 1"
                                            type="textarea" v-model="scope.row.paramDesc" @change="scope.row.update=1;"
                                            placeholder="请输入参数描述"></el-input>
                                    <span v-else>{{scope.row.paramDesc}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column width="48">
                                <template slot-scope="scope">
                                    <i class="el-icon-delete" @click="delParam(scope.row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <el-dialog title="新增参数" :visible.sync="dialogFormVisible">
        <el-form :model="para">
            <el-form-item label="参数名" :label-width="formLabelWidth">
                <el-input v-model="para.paramName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="参数类型" :label-width="formLabelWidth">
                <el-select v-model="para.paramType" placeholder="请选择参数类型">
                    <el-option label="系统参数" value="1"></el-option>
                    <el-option label="应用参数" value="2"></el-option>
                    <el-option label="用户参数" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="数据类型" :label-width="formLabelWidth">
                <el-select v-model="para.paramDataType" placeholder="请选择数据类型">
                    <el-option label="布尔值" value="1"></el-option>
                    <el-option label="整数" value="2"></el-option>
                    <el-option label="字符串" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否加密" :label-width="formLabelWidth">
                <el-select v-model="para.paramEncrypt" placeholder="请加密类型">
                    <el-option label="明文" value="2"></el-option>
                    <el-option label="密文" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="参数值" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="para.paramValue" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="参数描述" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="para.paramDesc" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="commitParam()">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="新增环境" :visible.sync="dialogEnvVisible">
        <el-form :model="envForm">
            <el-form-item label="组织编号" :label-width="formLabelWidth">
                <!--<el-input v-model="projectObj.groupId" disabled></el-input>-->
                <span>{{projectObj.groupId}}</span>
            </el-form-item>
            <el-form-item label="组件编号" :label-width="formLabelWidth">
                <!--<el-input v-model="projectObj.artifactId" disabled></el-input>-->
                <span>{{projectObj.artifactId}}</span>
            </el-form-item>
            <el-form-item label="版本编号" :label-width="formLabelWidth">
                <span>{{versionObj.version}}</span>
            </el-form-item>
            <el-form-item label="环境名称" :label-width="formLabelWidth">
                <el-input v-model="envForm.environmentName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="环境类型" :label-width="formLabelWidth">
                <el-select v-model="envForm.environmentType" placeholder="请选择环境类型">
                    <el-option v-for="(item, index) in envTypeList" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEnvVisible = false">取 消</el-button>
            <el-button type="primary" @click="commitEnv">确 定</el-button>
        </div>
    </el-dialog>
    <!-- visible.sync="dialogMachineVisible" 与定义的变量dialogMachineVisible绑定，如果为真显示该对象 -->
    <el-dialog title="新增机器" :visible.sync="dialogMachineVisible">
        <el-form :model="machineForm">
            <el-form-item label="组织编号" :label-width="formLabelWidth">
                <!--<el-input v-model="projectObj.groupId" disabled></el-input>-->
                <span>{{projectObj.groupId}}</span>
            </el-form-item>
            <el-form-item label="组件编号" :label-width="formLabelWidth">
                <!--<el-input v-model="projectObj.artifactId" disabled></el-input>-->
                <span>{{projectObj.artifactId}}</span>
            </el-form-item>
            <el-form-item label="版本编号" :label-width="formLabelWidth">
                <span>{{versionObj.version}}</span>
            </el-form-item>
            <el-form-item label="环境名称" :label-width="formLabelWidth">
                <span>{{environmentObj.environmentName}}</span>
            </el-form-item>
            <el-form-item label="机器名称" :label-width="formLabelWidth">
                <el-input v-model="machineForm.machineName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="机器描述" :label-width="formLabelWidth">
                <el-input v-model="machineForm.machineDesc" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogMachineVisible = false">取 消</el-button>
            <!--@click="commitMachine" 与方法 commitMachine()绑定-->
            <el-button type="primary" @click="commitMachine">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/ajax/libs/vue/2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/ajax/libs/axios/0.19.0/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    var Vue = window.Vue;
    // 注册组件
    var app = new Vue({
        el: '#app',
        data: {
            searchText: '',
            active: 0,
            message: 'Hello Vue!',
            value: '',
            tableHeight: 600,
            tableData: [
//					{"paramId":"1110","paramName":"param0","paramType":"系统参数","paramDataType":1,"paramValue":"0","paramDesc":"参数0"},{"paramId":"1111","paramName":"param1","paramType":"系统参数","paramDataType":2,"paramValue":"2","paramDesc":"参数1"},{"paramId":"1112","paramName":"param2","paramType":"系统参数","paramDataType":3,"paramValue":"4","paramDesc":"参数2"},{"paramId":"1113","paramName":"param3","paramType":"系统参数","paramDataType":1,"paramValue":"6","paramDesc":"参数3"},{"paramId":"1114","paramName":"param4","paramType":"系统参数","paramDataType":2,"paramValue":"8","paramDesc":"参数4"},{"paramId":"1115","paramName":"param5","paramType":"系统参数","paramDataType":3,"paramValue":"10","paramDesc":"参数5"},{"paramId":"1116","paramName":"param6","paramType":"系统参数","paramDataType":1,"paramValue":"12","paramDesc":"参数6"},{"paramId":"1117","paramName":"param7","paramType":"系统参数","paramDataType":2,"paramValue":"14","paramDesc":"参数7"},{"paramId":"1118","paramName":"param8","paramType":"系统参数","paramDataType":3,"paramValue":"16","paramDesc":"参数8"},{"paramId":"1119","paramName":"param9","paramType":"系统参数","paramDataType":1,"paramValue":"18","paramDesc":"参数9"}
            ],
            tableDataOld: [],
            selectRow: null,

            para: {
                "machineId": "",
                "paramName": "",
                "paramType": "",
                "paramDataType": '',
                "paramValue": '',
                "paramDesc": ""
            },
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            dialogTitle: '',
            dialogFormVisible: false,
            formLabelWidth: '120px',
            isUpdate: false,

            dialogEnvVisible: false,
            dialogMachineVisible: false,
            envForm: {environmentName: '', environmentType: ''},
            machineForm: {machineName: '', machineDesc: ''},
            encryptType: [
                {label: '明文', value: 2},
                {label: '密文', value: 1}
            ],
            dataTypeList: [
                {label: '布尔值', value: 1},
                {label: '整数', value: 2},
                {label: '字符串', value: 3}
            ],
            paramTypeList: [
                {label: '系统参数', value: 1},
                {label: '应用参数', value: 2},
                {label: '用户参数', value: 3}
            ],
            envTypeList: [
                {label: '开发环境', value: 1},
                {label: '测试环境', value: 2},
                {label: '预发布环境', value: 3},
                {label: '生产环境', value: 4}
            ],
            fetchProjectList: [],
            fetchProjectVersionList: [],
            fetchEnvironmentList: [],
            fetchMachineList: [],
            fetchParamList: [],

            projectObj: '',
            versionObj: '',
            environmentObj: '',
            machineObj: '',
            machineId: '',
        },
        created() {
            this.init();
            this.tableHeight = window.innerHeight - 79
        },
        mounted() {
            document.querySelector('#app').style.display = 'block';
        },
        computed: {},
        methods: {
            repairParams(machineId) {
                this.$confirm('确定是否对继承参数进行修复?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'repairParams', {machineId: machineId}).then((data) => {
                        this.$message.success('成功修复' + data.repairCount + '个参数！');
                        this.getParamList(this.machineObj);
                    });
                });
            },
            importParams(machineId) {
                this.$confirm('确定需要导入?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'importParams', {machineId: machineId}).then((data) => {
                        this.$message.success('导入成功');
                    });
                });
            },
            exportParams(machineId) {
                this.$confirm('确定需要导出?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'exportParams', {machineId: machineId}).then((data) => {
                        this.$message.success('导出成功');
                    });
                });
            },
            createEnvironment() {
                if (!this.projectObj || !this.versionObj) {
                    return;
                }
                this.dialogEnvVisible = true;
            },
            commitEnv() {
                if (!this.versionObj || !this.versionObj.versionId) {
                    this.$message.info('versionId不能为空');
                    return;
                }
                this.dialogEnvVisible = false;
                let para = Object.assign({}, this.envForm, {versionId: this.versionObj.versionId});
                console.log(para)
                this.$confirm('确定是否新增?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'createEnvironment', para).then((data) => {
                        this.$message.success('新增成功');
                        this.getEnvironment(this.versionObj);
                    });
                });
            },
            createMachine() {
                if (!this.projectObj || !this.versionObj || !this.environmentObj) {
                    return;
                }
                this.dialogMachineVisible = true;
            },
            commitMachine() {
                if (!this.environmentObj || !this.environmentObj.environmentId) {
                    this.$message.info('environmentId不能为空');
                    return;
                }
                //与:visible.sync="dialogMachineVisible"对应
                this.dialogMachineVisible = false;
                //将machineForm， {environmentId:。。}中的内容复制到
                let para = Object.assign({}, this.machineForm, {
                    environmentId: this.environmentObj.environmentId,
                });
                console.log(para)
                this.$confirm('确定是否新增?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'createMachine', para).then((data) => {
                        this.$message.success('新增成功');
                        this.getMachine(this.environmentObj);
                    });
                });
            },
            //是否新增参数
            createParam() {
                if (!this.machineObj || !this.machineObj.machineId) {
                    this.$message.info('请先选择机器');
                    return;
                }
                this.para.machineId = this.machineObj.machineId;
                this.dialogFormVisible = true;
                this.dialogTitle = '新增参数';
                this.isUpdate = false;
            },
            commitParam() {//新增数据提交
                if (!this.para.machineId) {
                    this.$message.info('请先选择机器');
                    return;
                }
                if (!this.para.paramName) {
                    this.$message.info('参数名不能为空');
                    return;
                }
                if (!this.para.paramType) {
                    this.$message.info('参数类型不能为空');
                    return;
                }
                if (!this.para.paramDataType) {
                    this.$message.info('数据类型不能为空');
                    return;
                }

                this.fetch('', 'createParam', this.para)
                    .then((data) => {
                        this.$message.success('新增成功');
                        this.dialogFormVisible = false;
                        this.para.paramName = null;
                        this.para.paramType = null;
                        this.para.paramDataType = null;
                        this.para.paramEncrypt = null;
                        this.para.paramValue = null;
                        this.para.paramDesc = null;
                        this.getParamList(this.machineObj);
                    });
            },
            deleteEnvironment(environmentId) {
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'deleteEnvironment', {environmentId: environmentId}).then((data) => {
                        this.$message.success('删除成功');
                        this.getEnvironment(this.versionObj);
                    });
                });
            },
            deleteMachine(machineId) {
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'deleteMachine', {machineId: machineId}).then((data) => {
                        this.$message.success('删除成功');
                        this.getMachine(this.environmentObj);
                    });
                });
            },
            delParam(paramObj) {
                this.$confirm('确定删除参数"' + paramObj.paramName + '"?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.fetch('', 'deleteParam', {paramId: paramObj.paramId}).then((data) => {
                        this.$message.success('删除成功');
                        this.getParamList(this.machineObj);
                    });
                });
            },
            dataType: function (val) {
                let text = '';
                this.dataTypeList.map((v, k) => {
                    if (v.value === val || v.label === val) {
                        text = v.label;
                    }
                });
                return text;
            },
            envType: function (val) {
                let text = '';
                this.envTypeList.map((v, k) => {
                    if (v.value === val || v.label === val) {
                        text = v.label;
                    }
                });
                return text;
            },
            paramType: function (val) {
                let text = '';
                this.paramTypeList.map((v, k) => {
                    if (v.value === val || v.label === val) {
                        text = v.label;
                    }
                });
                return text;
            },
            fetch(url, operate, data) {
                let self = this;
                return new Promise(function (resolve, reject) {
                    axios.post('/ajax',
                            {
                                'product':'guide',
                                'action':'ConfigGuideService',
                                'operate':operate,
                                'version':'1.0.0',
                                'data': JSON.stringify(data || {})
                            }
                    ).then((res) => {
                        res = res.data;
                        if (res && res.code === '200') {
                            if (res.data.result.code === '0000') {
                                resolve(res.data);
                            } else {
                                self.$message({
                                    type: 'info',
                                    message: res.data.result.desc || '系统错误'
                                });
                            }
                        } else {
                            self.$message({
                                type: 'info',
                                message: res.desc || '系统异常'
                            });
                        }
                    });
                });
            },
            init() {
                // 添加批量修改过滤
                this.fetch('', 'fetchProject').then((data) => {
                    console.log(data)
                    this.fetchProjectList = data.records || [];
                });
            },
            getVersion(project) {
                if (!project || !project.projectId) {
                    this.$message.info('projectId不能为空');
                    return;
                }

                this.projectObj = project;
                this.versionObj = '';
                this.environmentObj = '';
                this.machineObj = '';
                this.isUpdate = false;

                this.fetchProjectVersionList = [];
                this.fetchEnvironmentList = [];
                this.fetchMachineList = [];
                this.fetchParamList = [];
                this.tableDataOld = [];
                this.tableData = [];
                this.fetch('', 'fetchProjectVersion', {"projectId": project.projectId}).then((data) => {
                    console.log(data)
                    this.fetchProjectVersionList = data.records || [];
                });
            },
            getEnvironment(version) {
                if (!version || !version.versionId) {
                    this.$message.info('versionId不能为空');
                    return;
                }
                this.versionObj = version;
                this.environmentObj = '';
                this.machineObj = '';
                this.isUpdate = false;

                this.fetchEnvironmentList = [];
                this.fetchMachineList = [];
                this.fetchParamList = [];
                //清空右侧参数列表
                this.tableDataOld = [];
                this.tableData = [];
                this.fetch('', 'fetchEnvironment', {"versionId": version.versionId}).then((data) => {
                    console.log(data)
                    this.fetchEnvironmentList = data.records || [];
                });
            },
            getMachine(environment) {
                if (!environment || !environment.environmentId) {
                    this.$message.info('environmentId不能为空');
                    return;
                }
                this.environmentObj = environment;
                this.machineObj = '';
                this.isUpdate = false;

                this.fetchMachineList = [];
                this.fetchParamList = [];
                //清空右侧参数列表
                this.tableDataOld = [];
                this.tableData = [];
                this.fetch('', 'fetchMachine', {"environmentId": environment.environmentId}).then((data) => {
                    console.log(data)
                    this.fetchMachineList = data.records || [];
                });
            },
            getParamList(machine) {
                if (!machine.machineId) {
                    this.$message.info('machineId不能为空');
                    return;
                }
                this.machineObj = machine;
                this.isUpdate = false;

                this.fetch('', 'fetchParam', {"machineId": machine.machineId}).then((data) => {
                    console.log(data)
                    data.records && (data.records.map((v, k) => {
                        v.update = 0;
                    }));
                    //清空右侧参数列表
                    this.tableDataOld = Object.assign([], data.records);
                    this.tableData = data.records || [];
                });
            },
            //参数批量数据提交
            batchUpdateParam() {
                if (this.tableData.length == 0) {
                    this.$message.info('参数不能为空');
                    return;
                }
                this.$confirm('确定保存吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let list = this.tableData.filter(v => {
                        //进行参数编码
                        v.paramValue = encodeURIComponent(v.paramValue);
                        return v.update == 1;
                    });
                    this.fetch('', 'batchUpdateParam', {
                        "machineId": this.machineObj.machineId,
                        records: list
                    }).then((data) => {
                        this.$message.success('保存成功');
                        this.isUpdate = false;
                        this.getParamList(this.machineObj);
                    });
                });
            },
            cancelSave() {
                this.$confirm('确定取消保存吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isUpdate = false;
                    this.tableData = this.tableDataOld;
                });
            },
            //是否编辑表格
            toBatchUpdateParam() {
                this.isUpdate = true;
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === this.currIndex) {
                    return 'select-row';
                }
                return '';
            },
            setCurrent(row) {
                this.selectRow = row;
                this.$refs.singleTable.setCurrentRow(row);
            },
        }
    });
</script>
</body>
</html>
